<template>
	<view>
		<scroll-view
			scroll-y
			:scroll-top="scrollTop"
			@scroll="_scroll"
			class="_page"
			:style="{ height: `calc( 100vh - ${navBarHeight}px )`,paddingBottom: 'calc(144rpx + env(safe-area-inset-bottom))' }"
		>
			<!-- #ifdef APP-PLUS||MP -->
			<uni-nav-bar dark fixed backgroundStyle="#FFFFFF" color="#121317" status-bar>
				<template slot="left">
					<uni-icons type="arrow-left" @click="newReturnPagesApplication()" color="#121317" size="24"></uni-icons>
				</template>
				<template>
					<view class="nav_title">查成绩分布及预测</view>
				</template>
				<!-- #ifdef APP-PLUS||H5 -->
				<template slot="right">
					<view class="_right" @click.stop="_shareOpen">
						<text class="iconfont icon-a-Frame1076" style="color: #007aff; font-size: 32rpx"></text>
						<!-- <uni-icons type="redo-filled" color="#007AFF" size="20"></uni-icons> -->
						<text class="text">分享</text>
					</view>
				</template>
				<!-- #endif -->
			</uni-nav-bar>
			<!-- #endif -->
			<view class="_padding" style="background-color: #ffffff; padding-top: 20rpx">
				<mSearch :val="searchVal" :isSearch="true" :apiInfo="{}" placeholder="请输入升本分数查询" @check="(e) => (searchVal = e)"></mSearch>
			</view>
			<!-- 查询tips -->
			<view class="search-tips">
				<view class="">*</view>
				在上方输入您的模考分数/预测成绩可以查看该成绩的成绩排名
			</view>

			<!-- 截图区域 -->
			<view id="htmlCanvas">
				<view class="content _padding" :class="{noBorderRadius: !searchVal}">
					<view class="search-box">
						<listSelection
							v-for="(item, index) in searchArr"
							:checkInfo="item.checkInfo"
							:checkSearch="item.checkSearch"
							@confirm="(e) => confirm(e, index)"
							:key="index"
							:label="item.label || ''"
							:value="item.value || ''"
							:unit="item.unit"
							class="search-lis"
							:list="item.list"
							:placeholder="item.placeholder"
						></listSelection>
					</view>
					<template v-if="searchVal">
						<template v-if="searchMaskShow">
							<view class="default default-small">
								<view class="img-box">
									<image src="https://bicpic.baikewang.com/images/1646994256440.png" mode="heightFix"></image>
									<view class="text" v-if="checkHaveSearchInfo()">先在上方选择查询条件哦~</view>
									<view class="text" v-else>暂无数据~</view>
								</view>
							</view>
						</template>
						
						<view v-else>
							<!-- echarts -->
							<view class="echarts_box baike_logo" :style="{ backgroundImage: 'url(' + baikeLogobaseBg + ')' }">
								<qiun-data-charts
									v-if="majorOptionInfo.chartsDataLine.categories.length"
									type="area"
									tooltipFormat="gradeDistribution"
									@complete="(e) => complete(e, 'major', '', majorOptionInfo.index)"
									:opts="majorOptionInfo.options"
									:chartData="majorOptionInfo.chartsDataLine"
								/>
							</view>
							<!-- 历年高于该分数人数 -->
							<view class="statics-box" v-if="infoTop.plan_data && infoTop.plan_data.length">
								<view class="title">历年成绩高于{{ searchVal || 0 }}分的考生人数</view>
								<view class="uls">
									<view class="lis" v-for="(item, index) in infoTop.plan_data" :key="index">
										<view class="lis-left">{{ item.val }}</view>
										<view class="lis-right">（{{ item.key }}年）</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</view>
				<view class="all-score-segment _padding" v-if="infoBottom && infoBottom.count">
					<view class="title">全部分数段</view>
					<view class="school-table" :class="{ baike_logo: !showMember }"
					:style="{ backgroundImage: 'url(' + baikeLogobaseBg + ')' }">
						<uni-table emptyText="暂无更多数据" v-if="!showMember">
							<!-- 表头行 -->
							<uni-tr tr_class="thead">
								<uni-th align="center" width="30%">分数</uni-th>
								<uni-th align="center" width="30%">人数</uni-th>
								<uni-th align="center" width="30%">排名区间</uni-th>
							</uni-tr>

							<!-- 表格数据行 -->
							<uni-tr v-for="(item, index) in infoBottom.data" :key="index">
								<uni-td align="center" width="30%" class="table-bold" v-if="item.score&&item.score===0" >{{ item.score || 0 }}</uni-td>
								<uni-td align="center" width="30%" class="table-bold" v-else>未公布</uni-td>
								<uni-td align="center" width="30%" class="table-bold" v-if="item.people&&item.people===0">{{ item.people || 0 }}人</uni-td>
								<uni-td align="center" width="30%" class="table-bold" v-else>未公布</uni-td>
								<uni-td align="center" width="30%" class="table-bold">{{ item.current_people }}</uni-td>
								<template slot="tips" v-if="item.remark">
									<view class="border-tips info_tips">
										<uni-icons class="_flex" style="margin-right: 4rpx" type="info-filled" color="#E34D59"
											size="16"></uni-icons>
										<view class="single_row" :class="{ multiline: isOpenInfo[index] === 'open' }">
											{{ item.remark }}
										</view>
										<uni-icons
											@click="_toggle(item,index)"
											class="_flex"
											:class="[isOpenInfo[index]]"
											type="bottom"
											color="#E34D59"
											size="12"
										></uni-icons>	
									</view>
								</template>
							</uni-tr>
						</uni-table>
						<!-- 会员权益模块 -->
						<memberBenefits v-if="showMember"></memberBenefits>
					</view>
				</view>
			</view>

			<view class="default" v-if="!searchVal"  style="height: calc(100% - 54px - 35px - 105px)">
				<view class="img-box">
					<image src="https://bicpic.baikewang.com/images/1646994256440.png" mode="heightFix"></image>
					<view class="text">先在上方输入您的模考成绩查询哦~</view>
				</view>
			</view>
		</scroll-view>

		<view class="bottom_btn">
			<!-- <view class="primary_btn _block">查看考试报告</view> -->
			<m-button @clickBtn="popupBtnClick('查看考试报告', searchArr[2].checkInfo)" type="primary" size="xxl">查看考试报告</m-button>
		</view>
	
		<!-- 按钮 -->
		<view class="bottom_btn" v-if="searchVal && !showMember && !searchMaskShow && !notShowClaimOutLine">
			<view class="primary_btn _block">领取考试大纲</view>
		</view>
		<!-- 分享示例 -->
		<uni-popup :is-mask-click="false" ref="share" type="share" safeArea backgroundColor="transparent">
			<uni-popup-share title="分享至" cancelText="取消分享" @select="select"></uni-popup-share>
		</uni-popup>
		<!-- 截图 -->
		<subfunction v-if="searchVal && !showMember && !searchMaskShow" @share="_shareOpen" :scrollTop="topHeight" @_top="_top"></subfunction>
	</view>
</template>

<script>
import mSearch from '../components/m-search';
import subfunction from '../components/subfunction.vue';
import listSelection from '../components/listSelection.vue';
import memberBenefits from '../components/memberBenefits.vue';

export default {
	components: {
		mSearch,
		subfunction,
		listSelection,
		memberBenefits
	},
	watch: {
		searchVal(curr) {
			this.getInfo();
		},
		searchInfo: {
			handler(curr) {
				let that = this;
				let arr = Object.values(curr);
				let flag = arr.some((item) => !item);
				that.searchMaskShow = flag;
			},
			deep: true
		}
	},
	data() {
		return {
			isLoading: true,
			isOpenInfo: {},

			scrollTop: 0,
			topHeight: 0,
			// 页面中echarts图配置
			majorOptionInfo: {
				index: 0,
				// 折线图数据
				options: {
					color: ['#0052D9', '#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
					padding: [15, 30, 0, 10],
					dataLabel: false,
					dataPointShape: true,
					enableScroll: false,
					height: 200,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						axisLineColor: '#EFF0F0',
						fontColor: '#858688',
						fontSize: 10,
						marginTop: 2,
						boundaryGap: 'center',
						title: '分数',
						titleFontSize: 12,
						titleFontColor: '#858688',
						titleOffsetY: -22,
						titleOffsetX: -8,
						calibration: true
					},
					yAxis: {
						gridType: 'dash',
						dashLength: 5,
						gridColor: '#EFF0F0',
						showTitle: true,
						data: [
							{
								min: 0,
								axisLineColor: '#EFF0F0',
								position: 'left',
								title: '人数',
								fontSize: 10,
								fontColor: '#858688',
								// calibration: true,
								tofix: 0,
								titleFontSize: 12,
								titleFontColor: '#858688',
								titleOffsetY: -4,
								titleOffsetX: 8
							}
						]
					},
					extra: {
						area: {
							width: 2,
							type: 'straight',
							activeType: 'hollow',
							addLine: true,
							gradient: true
						},
						tooltip: {
							showArrow: true,
							borderRadius: 4,
							bgColor: '#272E34',
							bgOpacity: 1,
							gridType: 'dash',
							dashLength: 8,
							gridColor: 'rgba(0, 122, 255, 0.50)',
							fontColor: '#FFFFFF',
							fontSize: 10,
							legendShow: false,
							showCategory: false,
							categoryFontSize: 14,
							categoryColor: '#FFFFFF',
							dataList: []
						}
					}
				},
				chartsDataLine: {
					categories: [],
					series: [
						{
							name: '升本分数',
							data: []
						}
					]
				}
			},
			searchArr: [
				{
					key: 'year',
					list: [],
					unit: '年',
					checkInfo: {},
					checkSearch: '',
					placeholder: '考试年份'
				},
				{
					key: 'major_type',
					list: [],
					checkInfo: {},
					checkSearch: '',
					placeholder: '专业类别'
				},
				{
					key: 'major_list',
					list: [],
					checkInfo: {},
					checkSearch: '',
					label: 'major_name',
					val: 'major_id',
					placeholder: '专业名称'
				}
			],
			isOpenText: false,
			searchVal: '',
			infoTop: {},
			infoBottom: {},
			searchInfo: {
				score: null,
				year: null,
				major_type: null,
				major_list: null
			},
			searchMaskShow: true
		};
	},
	
	computed: {
        // 导航条高度
        navBarHeight() {
            let that = this;
            let navHeight = 0;
            let navigationBarHeight = 0;
            // #ifndef H5
            // 状态栏高度
            let info = uni.getSystemInfoSync();
            let statusBarHeight = info.statusBarHeight + info.safeAreaInsets.top || 0;
            // #ifdef MP

            // 获取微信胶囊的位置信息 width,height,top,right,left,bottom
            const custom = uni.getMenuButtonBoundingClientRect();
            // 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
            navigationBarHeight = custom.height + (custom.top - statusBarHeight) * 2;
            // #endif

            // 总体高度 = 状态栏高度 + 导航栏高度
            navHeight = navigationBarHeight + statusBarHeight;
            // #endif
            return navHeight;
        }
    },
	methods: {
		_toggle(item,index){
			let that = this;
			let _text = that.toggleTips(index, that.isOpenInfo);
			let obj = {
				[index]: _text
			}
			that.isOpenInfo = Object.assign({},that.isOpenInfo,obj);
		},
		checkHaveSearchInfo(){
			let that = this;
			let flag = true;
			let arr = that.searchArr.filter(item=>item.checkSearch)||[];
			flag = !arr || !arr.length;
			return flag;
		},
		getInfo() {
			let that = this;
			if(that.isLoading) return;
			if (!that.searchVal) {
				that.infoTop = {};
				that.infoBottom = {};
				that.searchMaskShow = true;
				that.searchArr.forEach((item) => {
					if (item.key === 'year') {
						item.checkSearch = null;
						item.checkInfo = {};
					}
				});
				return;
			}
			// 获取上半部分数据
			that.getUniversityMajorPrediction(true);
		},
		// 获取上半部分数据
		async getUniversityMajorPrediction(val = false) {
			let that = this;
			that.searchInfo = {
				score: that.searchVal
			};
			that.searchArr.forEach((item) => {
				if (item.label) {
					that.searchInfo[item.val] = item.checkInfo[item.val];
				} else {
					that.searchInfo[item.key] = item.checkSearch;
				}
			});
			if(that.isLoading) return;
			let { code, data } = await that.$application_api.getUniversityMajorPrediction(that.searchInfo);
			if (code != 0) return;
			that.searchArr.forEach(async (item, index) => {
				item.list = data[item.key].filter((lis) => !!lis);
				if (item.key === 'year') {
					if (!item.checkSearch || val) {
						item.checkSearch = item.list[0];
						await that.getUniversityMajorPrediction();
					} else if (data[item.key]) {
						item.list = data[item.key].filter((lis) => !!lis);
					}
				}
			});

			// that.searchArr.forEach((item) => {
			// 	if (data[item.key]) {
			// 		item.list = data[item.key].filter((lis) => !!lis);
			// 	}
			// });
			that.infoTop = data;
			that.echartsInfo();
		},
		// 图标数据
		echartsInfo() {
			let that = this;
			let obj = that.infoTop.one_score_data;
			that.majorOptionInfo.chartsDataLine.categories = [];
			that.majorOptionInfo.chartsDataLine.series[0].data = [];
			if (!obj.score.length) return;
			that.getBottomInfo();
			let score = that.searchInfo.score;
			let info = {
				current_people: [],
				people: [],
				score: []
			};
			let _index = 0;
			let sortArr = that.getClosestTen(obj.score, score);
			that.majorOptionInfo.index = sortArr[0].index;
			that.majorOptionInfo.chartsDataLine.categories = obj.score || [];
			that.majorOptionInfo.chartsDataLine.series[0].data = obj.current_people || [];

			obj.people.forEach((item, index) => {
				let start = 0;
				start = item - obj.current_people[index] + 1;
				if (start == item) {
					obj.people[index] = start;
				} else {
					obj.people[index] = `${start}-${item}`;
				}
			});
			let dataList = [
				{
					label: '升本分数',
					list: obj.score,
					unit: '人'
				},
				{
					label: '同分人数',
					list: obj.current_people,
					unit: '人'
				},
				{
					label: '成绩排名',
					list: obj.people
				}
			];

			that.majorOptionInfo.options.extra.tooltip.dataList = dataList;
		},
		scrolltolower() {
			let that = this;
			if (that.infoBottom.currentPage == that.infoBottom.totalPages) return;
			that.getBottomInfo();
		},
		async getBottomInfo() {
			let that = this;
			let page = that.infoBottom.totalPages ? (that.infoBottom.currentPage || 0) + 1 : 1;
			let { code, data } = await that.$application_api.getUniversityMajorOneScore(Object.assign({}, { page: page }, that.searchInfo));
			if (code != 0) return;
			let arr = that.infoBottom.data || [];
			arr = arr.concat(data.data);
			that.infoBottom = data;
			that.infoBottom.data = arr;
		},
		async confirm(e, index) {
			if (this.searchArr[index].label) {
				this.searchArr[index].checkInfo = e;
			} else {
				this.searchArr[index].checkSearch = e;
			}
			await this.getUniversityMajorPrediction();
		},
		_top() {
			this.scrollTop = this.topHeight;
			setTimeout(() => {
				this.scrollTop = 0;
			}, 100);
		},
		_scroll(e) {
			this.topHeight = e.detail.scrollTop;
		},
		_shareOpen() {
			this.$refs.share.open('bottom');
		}
	},
	onLoad(){
		let that = this;
		getApp().globalData.isLiscation = true;
		let searchDataInfo = uni.getStorageSync('searchDataInfo');
		let activeInfo = searchDataInfo.checkInfo;
		if(activeInfo){
			that.searchArr = that.searchArr.map(item=>{
				if(activeInfo[item.key]){
					item.checkSearch = activeInfo[item.key];
				}else if(item.label&&activeInfo[item.label]){
					item.checkInfo = {
						[item.label]:activeInfo[item.label],
						[item.val]:activeInfo[item.val]
					};
				}
				return item;
			})
			that.getUniversityMajorPrediction();
			that.isLoading = false;
			setTimeout(()=>{
				that.searchVal = '200';
			},500)
		}else{
			that.isLoading = false;
		}
	},
};
</script>

<style lang="scss" scoped>
$paddingLR: 40rpx;
._page {
	width: 100vw;
	background-color: #f4f5f7;
	box-sizing: border-box;
}
.search-tips {
	width: 100%;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16rpx 0;
	box-sizing: border-box;
	font-size: 24rpx;
	color: #121317;
	view {
		color: #e34d59;
		margin-right: 8rpx;
	}
}
.content {
	width: 100%;
	background-color: #ffffff;
	padding-top: 52rpx;
	padding-bottom: 52rpx;
	border-radius: 0 0 30rpx 30rpx;
	&.noBorderRadius{
		border-radius: 0;
	}
	.search-box {
		margin-bottom: 27rpx;
	}
	.statics-box {
		margin-top: 50rpx;
		width: 100%;
		.title {
			font-size: 39rpx;
			color: #121317;
			font-weight: bold;
		}
		.uls {
			margin-top: 18rpx;
			display: grid;
			grid-gap: 10rpx 30rpx;
			grid-template-areas: '. . .';
			.lis {
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: 23rpx;
				view {
					flex-shrink: 0;
				}
				.lis-left {
					color: #858688;
				}
				.lis-right {
					color: #121317;
					font-weight: bold;
				}
			}
		}
	}
}
.all-score-segment {
	margin-top: 31rpx;
	width: 100%;
	background-color: #ffffff;
	border-radius: 30rpx 30rpx 0 0;
	padding-top: 36rpx;
	padding-bottom: 36rpx;
	.title {
		font-size: 38rpx;
		color: #121317;
		font-weight: bold;
	}
}
// 分享海报
._mask_box {
	position: fixed;
	width: 100vw;
	height: 100vh;
	left: 0;
	top: 0;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(10px);
	display: flex;
	align-items: center;
	justify-content: center;

	.img_box {
		width: calc(100vw - 32rpx * 2);
		// max-height: 90vh;
		position: relative;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		._img {
			height: 80vh;
			// height: 80vh;
		}
		image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}

		.iconfont {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			color: #ffffff;
			font-size: 32rpx;
			border-radius: 50%;
			border: 4rpx solid #ffffff;
			z-index: 1;
		}
	}

	._btn_box {
		width: 100%;
		padding: 0 80rpx;
		box-sizing: border-box;
		margin-top: 60rpx;

		._btn {
			width: 100%;
			padding: 20rpx 0;
			text-align: center;
			margin: 0 auto;
			border-radius: 100rpx;
			background-color: #5ab74d;
			color: #ffffff;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			.iconfont {
				font-size: 36rpx;
				color: #ffffff;
				margin-right: 12rpx;
			}
		}
	}
}

.school-box {
	width: 100vw;
	height: max-content;
	padding: 40rpx 39rpx;
	box-sizing: border-box;
	.school-title {
		width: 100%;
		.title {
			font-size: 35rpx;
			color: #121317;
			font-weight: bold;
			margin-bottom: 10rpx;
		}
		.tips {
			font-size: 27rpx;
			color: #121317;
			text {
				font-weight: bold;
			}
			text._blue {
				color: $bic-color-public;
			}
			text._yellow {
				color: $bic-color-civilian;
			}
			text._gray {
				color: $bic-color-independent;
			}
		}
	}
}

.default-small {
	width: calc(100vw - 40rpx * 2);
	height: calc(100vh - 100vw * (390 / 750));
	background-color: #ffffff;
	border-radius: 20rpx;
	margin: calc(100vw * (24 / 390)) auto 0;
}
</style>
